<template>
  <div class="status-div">
    <LineChart :option="option" :style="chartStyle"></LineChart>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import LineChart from '@/components/Charts/LineChartX.vue'
import { useRobotStore } from '@/stores/robot-module'
import { storeToRefs } from 'pinia';

const robotStore = useRobotStore()
const { posXArr, posYArr, posZArr, timeArr} = storeToRefs(robotStore)
const chartStyle = {'height': '200px'}
const option = ref({
  backgroundColor: 'rgba(14, 14, 18, 0.8)',
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['X', 'Y', 'Z']
  },
  dataZoom: [
    {type: 'inside'},
    {
      type: 'slider',
      xAxisIndex: 0,
      minSpan: 5,
      height: 15
    }
  ],
  grid: {
    top: 10,
    bottom: 50,
    right: 50
  },
  xAxis: {
    type: 'category',
    data: timeArr
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: posXArr,
      type: 'line',
      name: 'X'
    },
    {
      data: posYArr,
      type: 'line',
      name: 'Y'
    },
    {
      data: posZArr,
      type: 'line',
      name: 'Z'
    }
  ]
});

</script>

<style lang="scss" scoped>

</style>